<template>
    <div class="bigBox" :style="{backgroundImage: 'url(' + backgroundImg + ')'}">
        <div class="content-box">
            <div class="left-box">
                <img src="../../../public/img/login_left.png" alt="">
            </div>
            <div class="right-box">
                <div class="login-box">
                    <p class="login-title">欢迎登录</p>
                    <p class="login-sub-title">重庆XXXXXXXX平台</p>
                    <a-form-model ref="form" :model="loginInfo" :rules="rules" class="login-form">
                        <a-row>
                            <a-col :span="24">
                                <a-form-model-item label="" prop="user">
                                    <a-input v-model="loginInfo.user" :maxLength="20" class="login-ipt" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="24">
                                <a-form-model-item label="" prop="pass">
                                    <a-input-password v-model="loginInfo.pass" :maxLength="20" class="login-ipt" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="24">
                                <a-form-model-item label="" prop="code" class="login-ipt-code-box">
                                    <a-input v-model="loginInfo.code" :maxLength="20" class="login-ipt" />
                                    <img @click='changeVerify()' :src="captchaImage" alt="" width="150" height="48" class="img">
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form-model>
                    <div class="itemsBtn" @click="postBox()">登 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import config from '@/config'
    import backgroundImg from '../../../public/img/login_bg.png';
    import { getCodeImg, login } from '@/api/login';
    import { lenRule, notEmptyRule } from '@/appBase/formRules';
    export default {
        data() {
            return {
                backgroundImg,
                captchaImage: '',
                loginInfo: {
                    user: '',
                    pass: '',
                    code: '',
                },
                randomCode: '',
                config,
                rules: {
                    user: [notEmptyRule(), lenRule({ max: 20 })],
                    pass: [notEmptyRule(), lenRule({ max: 20 })],
                    code: [notEmptyRule(), lenRule({ max: 20 })]
                }
            };
        },
        watch: {
        },
        computed: {
            enCopyright: () => config.enCopyright || config.copyright,
            copyright: () => config.copyright
        },
        created() {
            var _this = this;
            document.onkeydown = function (e) { // 回车提交表单
                // 兼容FF和IE和Opera
                var theEvent = window.event || e;
                var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
                if (code == 13) {
                    _this.postBox()
                }
            }
        },
        beforeDestroy() {
            document.onkeydown = function (e) {
                var key = window.event.keyCode
                if (key === 13) {

                }
            }
        },
        mounted: function () {
            // TODO: 调试阶段保留
            this.loginInfo.user = 'admin';
            this.loginInfo.pass = '123456.'
            this.getRandomCode();
        },
        methods: {
            changeVerify() {
                this.getRandomCode();
            },
            postBox() {
                if (!this.loginInfo.user) {
                    this.$message.error('请输入正确用户名');
                    this.getRandomCode();
                    return false;
                }
                if (!this.loginInfo.pass) {
                    this.$message.error('请输入正确密码');
                    this.getRandomCode();
                    return false;
                }

                if (!this.loginInfo.code) { //服务端生成验证码不用判断验证码是否正确
                    this.isshowItem = 1;
                    this.isshowIcon = 1;
                    this.istype = 2;
                    this.inputType = 'yzm';
                    this.isyzmcheck = true;
                    this.yzmTs = '请输入正确验证码'
                    this.$message.error('请输入正确验证码');
                    this.getRandomCode();
                    return false;
                }
                login({
                    username: this.loginInfo.user,
                    code: this.loginInfo.code,
                    password: this.loginInfo.pass,
                    uuid: this.randomCode
                }).then((result) => {
                    console.log(result);
                    this.$store.commit('UpdateToken', result.token);
                    this.$message.success('登录成功');
                    setTimeout(() => {
                        this.$router.push(config.homeIndex);
                    }, 500);
                }).catch(err => {
                    this.getRandomCode();
                });
            },
            //获取随机码
            getRandomCode() {
                getCodeImg().then(res => {
                    this.randomCode = res.uuid;
                    this.captchaImage = 'data:image/gif;base64,' + res.img;
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .zsiconverify-fill {
        font-size: 28px !important;
        left: 16px !important;
    }
    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-text-fill-color: #ededed !important;
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        background-color: #0f3c7e;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }
    .yzm {
        width: 200px;
    }

    .bigBox {
        width: 100%;
        min-width: 1400px;
        height: 100%;
        // background: url(../../../public/img/logoBj.png)no-repeat center;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        /*padding: 180px 0;*/
    }

    .bottomBox {
        position: absolute;
        bottom: 80px;
        left: 50%;
        text-align: center;
        font-size: 12px;
        color: #03285f;
        @include transforms(-50%, 0);

        p {
            margin-bottom: 0;
            line-height: 2;
        }
    }

    .content-box {
        &{
            height: 584px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 10px 10px 10px 10px;
            display: flex;
            justify-content: 'space-between';
        }
        .left-box {
            width: 347px;
            img {
                width: 100%;
                height: 100%;
                user-select: none;
            }
        }

        .right-box {
            &{
                  width: 554px;
            padding-top: 36px;
            font-size: 22px;
            background-color: #fff;
            }
            .login-box {
                width: 80%;
                margin: 0 auto;
                // width: 50%;
                .login-title {
                    margin-bottom: 0;
                    font-size: 42px;
                    font-weight: 700;
                    color: #42414e;
                    letter-spacing: 4px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                }
                .login-sub-title {
                    margin-top: 10px;
                    margin-bottom: 35px;
                    font-weight: 400;
                    color: #524f4f;
                    letter-spacing: 2px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                }

                .login-form {
                    /deep/ .ant-input {
                        height: 56px;
                        background: #fafafa;
                        border: 1px solid #dfe1e6;
                        border-radius: 4px;
                        font-size: 18px;
                    }
                    .login-ipt-code-box {
                        position: relative;
                        .img {
                            position: absolute;
                            right: 10px;
                            top: -10px;
                            width: 74px;
                            height: 34px;
                            cursor: pointer;
                            background: #fff;
                        }
                    }
                }
                .itemsBtn {
                    width: 100%;
                    height: 64px;
                    line-height: 64px;
                    text-align: center;
                    background: #328cff;
                    border: 1px solid #e1e3e8;
                    font-size: 24px;
                    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                    font-weight: 700;
                    color: #fff;
                    cursor: pointer;
                    @include borderRadius(32px);
                }

                .itemsBtn:hover {
                    background: #2781f7;
                }
            }
        }
    }
</style>
